<template>
  <!-- 下拉树。由于 value 不能确定是整数还是字符串，就暂时不实现 v-model 了 -->
  <div class="input-tree">
    <el-popover
      ref="popover"
      placement="bottom-start"
      trigger="click"
      popper-class="input-tree-popper">
      <el-tree
        :data="data"
        :props="props"
        :node-key="props.id"
        ref="tree"
        class="tree"
        show-checkbox
        @check="handleCheck">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span :title="node.label">{{ node.label }}</span>
        </span>
      </el-tree>
    </el-popover>
    <el-input id="input" v-model="name" v-popover:popover :placeholder="'请选择' + placeholder" clearable @clear="clearHandle" class="item-list__input"></el-input>
  </div>
</template>
<script>
export default {
  props: {
    /** 数据源 */
    data: {
      type: Array,
      default: () => []
    },
    props: {
      type: Object | Array,
      default: () => {
        return {
          id: 'id',
          label: 'label',
          children: 'children'
        }
      }
    },
    filterProps: {
      type: Object,
      default: () => {
        return {
          filterProp: 'type',
          filterValues: []
        }
      }
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      name: ''
    }
  },
  created () {},
  methods: {
    handleCheck (data, statusObj) {
      const checkedNodes = statusObj.checkedNodes.filter(node => {
        const value = node[this.filterProps.filterProp]
        return this.filterProps.filterValues.indexOf(value) > -1
      })
      this.$emit('check', data, checkedNodes)
      this.setName(checkedNodes)
    },
    // 设置当前选中节点
    setCurrentKeys (ids, leafOnly = true) {
      this.$refs.tree.setCheckedKeys(ids, leafOnly)
      this.$nextTick(_ => {
        const checkedNodes = this.$refs.tree.getCheckedNodes().filter(node => {
          const value = node[this.filterProps.filterProp]
          return this.filterProps.filterValues.indexOf(value) > -1
        })
        this.setName(checkedNodes)
      })
    },
    setName (checkedNodes) {
      if (checkedNodes.length === 0) {
        this.name = ''
      } else if (checkedNodes.length === 1) {
        this.name = checkedNodes[0][this.props.label]
      } else {
        this.name = `${this.placeholder}(${checkedNodes.length})`
      }
    },
    clearHandle () {
      this.$refs.tree.setCheckedKeys([])
      this.setName([])
      this.$emit('check', null, null)
      this.$nextTick(_ => {
        this.$refs.popover.showPopper = false
      })
    }
  }
}
</script>

<style lang="scss">
.input-tree-popper {
  .tree {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}
.input-tree {
  .item-list__input,
  .icon-list__input {
      > .el-input__inner {
      cursor: pointer;
    }
  }
  &__icon-popover {
    width: 458px;
    overflow: hidden;
  }
  &__icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &__icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;
      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
  .icon-list__tips {
    font-size: 18px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
  }
  .custom-tree-node {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

</style>
